@import "tailwindcss";
@config "../../tailwind.config.ts";

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  scrollbar-width: none;
}

@keyframes progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-progress {
  animation: progress 2s ease-in-out infinite;
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(100%); /* 初始位置在底部外部 */
    opacity: 0; /* 透明 */
  }
  100% {
    transform: translateY(0); /* 最终位置在原位置 */
    opacity: 1; /* 完全可见 */
  }
}

.slide-in-bottom {
  animation: slide-in-bottom 0.5s ease-in-out forwards; /* 应用动画 */
}

/* 在 globals.css 中添加 */
.katex {
  font-size: 1.1em !important;
  padding: 0 0.2em !important;
}

.katex-display {
  margin: 0.8em 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

/* 在全局 CSS 中添加 */
pre code {
  display: block;
  overflow-x: auto;
  padding: 1em;
  font-family: "Fira Code", Menlo, Monaco, Consolas, monospace; /* 使用等宽字体 */
  letter-spacing: -0.05em; /* 紧凑字距 */
}

pre {
  font-size: 14px;
  position: relative;
  background: #e5e7eb; /* 浅灰色背景 */
  border-radius: 14px;
  margin: 1rem 0;
  padding: 0.2rem;
  color: #111827; /* 深灰色文字 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 添加柔和阴影 */
}

/* 控制行内代码 */
code:not(pre code) {
  font-size: 14px;
  background: #e5e7eb; /* 更浅的行内代码背景 */
  padding: 0.3em 0.6em;
  border-radius: 0.5em;
  color: #111827; /* 深灰色文字 */
  font-family: "Fira Code", Menlo, Monaco, Consolas, monospace; /* 使用等宽字体 */
  letter-spacing: -0.05em; /* 紧凑字距 */
  font-weight: 100 !important;
}

.prose ::before,
.prose ::after {
  content: none !important;
}

/* 覆盖 highlight.js 样式 */
.hljs {
  background: #ffffff !important; /* 纯白背景 */
  color: #1f2937 !important; /* 深灰文字 */
  font-size: 14px;
  border-radius: 12px;
  padding: 1.2rem !important;
}

/* 语法元素颜色控制 */
.hljs-keyword {
  color: #3b82f6 !important; /* 亮蓝色关键字 */
} 
.hljs-title {
  color: #0ea5e9 !important; /* 蓝绿色类名/函数名 */
} 
.hljs-string {
  color: #f472b6 !important; /* 粉红色字符串 */
} 
.hljs-comment {
  color: #48bb78 !important; /* 绿色注释 */
} 
.hljs-number {
  color: #f59e0b !important; /* 橙色数字 */
} 
.hljs-built_in {
  color: #a855f7 !important; /* 紫色内置函数 */
} 
.hljs-attr {
  color: #db2777 !important; /* 属性名颜色 */
}
.hljs-variable {
  color: #fbbf24 !important; /* 变量名颜色 */
}

.react-flow {
  --xy-node-border-default: 0px !important; 
  --xy-node-border-selected-default: 0px !important;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(10px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.animate-fade-in-out {
  animation: fadeInOut 3s ease-in-out forwards;
}